• 0

css rollover image menu


Question

hey everyone, i will be the first to admit im not very good at CSS, it has been about 1.5 years since i even touched the stuff last. so i did some searching around the net and came up with the following:

i have these images:

post-31002-1203433990.png THIS IS PHOTOS.PNG

post-31002-1203433913_thumb.png THIS IS MENU.PNG

there are more menu options than that. ok so i have this code:

in header.php:

<div id="topmenu" >
	<ul>
		<li id="main"><a href="/"><span><em>Main</em></span></a></li>
	</ul>
</div>

in CSS:

#topmenu { 
	height:23px; 
	background-image:url(images/menu/menu.png); 
	}

#topmenu ul { 
	list-style:none; 
	margin:0; 
	padding:0 10px;  
	}

#topmenu li { 
	float:left; 
	}

#topmenu li a span, #topmenu li a em { 
	display:none; 
	}

#topmenu li a { 
	display:block; 
	height:23px; 
	width:100px; 
	background-position:center top; 
	}

#topmenu li a:hover span { 
	display: block; 
	width:100px; 
	height:23px; 
	top:-23px; 
	background-position:center bottom; 
	}

#topmenu li#photos a, #topmenu li#photos a:hover span { 
	background-image:url(images/menu/photos.png); 
	}

and this is the problem i'm getting:

post-31002-1203434021.png

As you can see they are doubling up on top of each other. So my question is, how can i remove the normal state of the menu item. I don't want to use solid colour background for the menu items as i have made many picture/colour themes for this blog depending on events and seasons in Japan. I'm hoping this is really simple. I don't even know where to start to find an answer to this as i got this code from a how-to. sorry for trouble ><

Edited by fukachu
Link to comment
https://www.neowin.net/forum/topic/620791-css-rollover-image-menu/
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Your CSS seems to be, at the very least, partially incomplete because the last bit of code is missing the closing }, but I'm sure that you just didn't include it.

Which of the two images is main.png? I'm not seeing where the second image (main2.png?) is put in by the CSS either. Is this page accessible for us to see?

I like to refer people to this page for CSS rollovers (which can help you in two ways, with the rollover and with no preloading).

  • 0

thank you for your reply, sorry that i didn't give everything correcly. I have named the images above and i have fixed the code to reflect the images better at the last minute i changed the image from main to photos as that particular one showed the problem more clearly but if forgot to edit the code in this post.

you can view the site here\ it is very simple default wordpress layout with some graphical changes and the menu. obviously not complete but wanting to get this menu nailed before i move on.

as for the website you linked to. i tried using that sites information once before and i must have been doing something wrong. 1.5 years ago i had a hell of a time getting everything to look the same in the menu in firefox/safari/ie even though it is meant to be compatible. so i looked elsewhere this time. also with the example you show there, it might still have the original yellow image showing but simply being covered up by the brown and black image sections.

what i need is for the regular state image, the smaller version of photos, to disappear when in hover state so that it doesn't appear behind the larger, hover state image of photos.

the reason for this is the themes i will have as you can see below will be changed every few weeks to reflect what is going on in Japan: it makes my life easier if i can have the menu without putting the colour backgrounds in. then if i want to add new menu items down the track, which is more than likely, i can just make one image with the text rather than as many as 20 (when finished making all the themes)

post-31002-1203463705_thumb.jpg

Edited by fukachu
  • 0

Alrighty, I saw this at first and confirmed that it's the problem: you're setting the background for both the anchor and span. Remove all references to applying a background to the span, and remove span from #topmenu li a:hover span { }

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Atomic Heart is getting a sequel and an MMO RPG spin-off by Pulasthi Ariyasinghe Atomic Heart arrived in 2023 as one of the biggest action game surprises, offering players an alternative history version of the Soviet Union to explore where the player is in the middle of a robot uprising. Just as the original passes 10 million players, developer Mundfish today unveiled two new games at the Summer Game Fest showcase. First up is Atomic Heart 2, a full-fledged sequel that has players returning to the over-the-top retrofuturistic setting for another wacky adventure. The studio promises an expanded RPG system, a story that picks up from the original, bringing back all the fan-favorite characters, as well as an "explosive combat system" that now let players use both hands for their powers and standard weaponry. “Ever since the launch of the original Atomic Heart, we’ve been floored by the unwavering support and enthusiasm of our playerbase. When we set out to create the Atomic Universe, we never imagined that the community would respond with such amazing passion,” shared Robert Bagratuni, Founder and CEO of Mundfish, and Game Director of Atomic Heart 2. He continues, “It’s been hard sitting on this announcement for so long, but today, at Summer Game Fest, we’re incredibly happy to finally and officially announce that Atomic Heart 2 is coming, and it’s bigger and bolder than the original.” Built on Unreal Engine 5, Atomic Heart 2 is coming to PC and consoles. A release window has not been attached to the project yet. Next, the studio revealed it's working on a unique spin-off that's set in the same universe. Dubbed The Cube, it will be a massively multiplayer online RPG shooter experience that has players entering a giant cube structure in the sky for survival. Aside from fighting massive monsters and the cube itself, the unique element comes from how the environment will scramble like a Rubik's cube. This unstable arena will offer players new opportunities without needing to travel large distances in an open world. The Cube does not have a release date attached to it either.
    • Game of Thrones is getting a real-time strategy game on PC: War For Westeros by Pulasthi Ariyasinghe A brand-new game is coming out based on George R. R. Martin's A Song of Ice and Fire universe, and surprisingly, it's a full-fledged real-time strategy game for PC. Titled Game of Thrones: War For Westeros, the new title was revealed at the Summer Game Fest 2025 kickoff show today. Check out the debut trailer below, which features plenty of familiar faces from the television series, as well as fights that many probably wished they saw in the story. It looks like players' actions will have some major deviations from how the storyline actually played out in the series, with major characters dying, switching sides, and having massive wars against each other. Unfortunately, no gameplay was revealed in the trailer. War of Westeros is being developed by PlaySide, which may be familiar to those who have played their previous real-time strategy experience, Age of Darkness: Final Stand. The studio said today that its new project will offer players House Stark, House Lannister, House Targaryen, or even the Night King's forces as factions they can take the role of in their journey. " Each faction offers deeply asymmetric strategies, with signature heroes, armies, and mechanics forged from the brutal legacy of Westeros," adds the company. Infantry, cavalry, siege engines, giants, and dragons will all be available for deployment during battles, both when attacking other factions and when defending. The title will be playable solo to take over the Seven Kingdoms, as well as in multiplayer, where a free-for-all mode will enable multiple players to lead forces against each other for victory. Game of Thrones: War for Westeros is currently only announced for PC, with a Steam page already available for fans to wishlist. A release date, nor pricing, has not been revealed just yet, with the title slated to launch sometime in 2026.
    • What do you consider modern hardware? Mine is a few years old, but you can't tell me that a 5900x with a RTX 3080 should be slow with a Windows UI because they are 4 years old. No one said it didn't run perfectly fine; we said it was slower than 10, and it factually is, to the point that saying anything else is just propaganda.
    • Sorry if video games weren't supposed to be included but this is the only intro that sold me on a game before even playing it    
  • Recent Achievements

    • Mentor
      Karlston went up a rank
      Mentor
    • One Month Later
      EdwardFranciscoVilla earned a badge
      One Month Later
    • One Month Later
      MoyaM earned a badge
      One Month Later
    • One Month Later
      qology earned a badge
      One Month Later
    • One Year In
      Frinco90 earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      484
    2. 2
      snowy owl
      253
    3. 3
      +FloatingFatMan
      252
    4. 4
      ATLien_0
      214
    5. 5
      Xenon
      150
  • Tell a friend

    Love Neowin? Tell a friend!